<template>
    <div class="profile-container">
      <el-row :gutter="30" class="profile-wrapper">
        <!-- 左侧个人信息 -->
        <el-col :md="6" class="profile-sidebar">
          <div class="user-card">
            <div class="avatar-wrapper">
              <el-avatar :size="150" :src="imgUrl" class="profile-avatar" />
              <div class="decorative-line"></div>
            </div>
            <div class="user-info">
              <h2 class="username">{{ userInfo.systemUserNickName }}</h2>
              <div class="info-item">
                <el-icon><Message /></el-icon>
                <span>{{ userInfo.systemUserEmail }}</span>
              </div>
              <div class="info-item">
                <el-icon><Iphone /></el-icon>
                <span>{{ userInfo.systemUserPhone }}</span>
              </div>
            </div>
          </div>
        </el-col>
  
        <!-- 右侧操作区域 -->
        <el-col :md="18" class="profile-main">
          <div class="operation-card">
            <div class="card-header">
              <h3>账户设置</h3>
              <el-divider class="custom-divider" />
            </div>
            <el-menu 
              mode="horizontal" 
              router
              class="settings-nav"
              :default-active="$route.path">
              <el-menu-item index="/Bisic" class="nav-item">
                <template #title>
                  <!-- <el-icon><User /></el-icon> -->
                  <el-icon><User /></el-icon>
                  <span>基本资料</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/Pass" class="nav-item">
                <template #title>
                  <el-icon><Lock /></el-icon>
                  <span>安全设置</span>
                </template>
              </el-menu-item>
            </el-menu>
            <div class="settings-content">
              <RouterView/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>

<script setup>
import { ref,onMounted } from 'vue';
// import { Lock, Message, Iphone, User } from '@element-plus/icons-vue';
// const User=ref({})
const url = ref('http://localhost:8080/file/downLoad?fileName=')
const imgUrl = ref('')

 onMounted(() => {
   getUserInfo();
 })
 const userInfo = ref(JSON.parse(localStorage.getItem('userInfo'))) // 改为响应式对象
 const getUserInfo = () => {
    userInfo.value = JSON.parse(localStorage.getItem('userInfo')) // 新增重新获取
   imgUrl.value = url.value + userInfo.value.systemUserImg; 
 }
</script>

  <style scoped>
  .profile-container {
    background: #f5f7fa;
    min-height: calc(100vh - 60px);
    padding: 30px;
  }
  
  .profile-wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* 左侧样式 */
  .user-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
  }
  
  .avatar-wrapper {
    text-align: center;
    position: relative;
    padding: 30px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  }
  
  .profile-avatar {
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  
  .decorative-line {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #409eff;
    border-radius: 2px;
  }
  
  .user-info {
    padding: 30px 20px;
  }
  
  .username {
    color: #303133;
    font-size: 24px;
    text-align: center;
    margin: 20px 0;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .el-icon {
      margin-right: 10px;
      color: #409eff;
      font-size: 18px;
    }
    
    span {
      color: #606266;
      font-size: 14px;
    }
  }
  
  /* 右侧样式 */
  .operation-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-height: 500px;
  }
  
  .card-header {
    padding: 24px;
    
    h3 {
      color: #303133;
      font-size: 20px;
      margin: 0;
    }
  }
  
  .custom-divider {
    margin: 16px 0;
  }
  
  .settings-nav {
    padding: 0 24px;
    border-bottom: none;
    
    .nav-item {
      transition: all 0.3s;
      border-radius: 8px;
      margin: 0 10px;
      
      &.is-active {
        background: #f0f7ff;
        color: #409eff;
        
        .el-icon { color: #409eff; }
      }
      
      .el-icon { margin-right: 8px; }
    }
  }
  
  .settings-content {
    padding: 24px;
  }
  </style>